<template>
	<view>
		<mynavigationbar text="信息绑定"/>
		<image src="../../static/images/bind/header.png" mode="" class="header"></image>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<view class="box">
				<view class="title">基本信息</view>
				<uni-forms-item label="学生学号:" name="student_number">
					<!-- <uni-easyinput type="text" v-model="formData.student_number" placeholder="请输入学生学号" /> -->
					<input class="input" v-model="formData.student_number" type="text" placeholder="请输入学生学号"
						@input="binddata('student_number',$event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item label="真实姓名:" name="real_name">
					<!-- <uni-easyinput type="text" v-model="formData.real_name" placeholder="请输入姓名" /> -->
					<input class="input" v-model="formData.real_name" type="text" placeholder="请输入姓名"
						@input="binddata('real_name',$event.detail.value)" />
				</uni-forms-item>
			</view>
			<view class="box">
				<view class="title">详细信息</view>
				<uni-forms-item label="联系电话:" name="mobile">
					<!-- <uni-easyinput type="text" v-model="formData.mobile" placeholder="请输入姓名" /> -->
					<input class="input" v-model="formData.mobile" type="text" placeholder="请输入联系电话"
						@input="binddata('mobile',$event.detail.value)" />
					<view class="line"></view>
				</uni-forms-item>
				<uni-forms-item label="所在专业:" name="name">
					<picker mode="selector" @change="bindPickerChange" :value="index" :range="array"
						name="student_depart">
						<view class="uni-input" style="line-height: 80rpx; width: 300rpx; color: #333;">{{array[index]}}
						</view>
					</picker>
					<view class="line"></view>
				</uni-forms-item>
				<uni-forms-item label="人脸采集:">
					<view class="chooseImg" @click="chooseImg()">
						<uni-icons type="camera"  size="60"  class="icon" v-if="chooseImgUrl === ''"></uni-icons>
						<view class="img" v-else>
							<image :src="chooseImgUrl" mode=""></image>
							<view class="mask">
								成功上传
							</view>
						</view>
					</view>
				</uni-forms-item>
			</view>
		</uni-forms>
		<view class="goapply"><text>当前权限: </text>
			<navigator url="/subpkg/roleApply/roleApply" class="text">{{ position }}</navigator>
		</view>
		<button @click="submit">提交</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				Academy: [],
				array: ['请选择'],
				index: 0,
				formData: {
					real_name: '',
					mobile: '',
					student_number: ''
				},
				chooseImgUrl: '',
				rules: {
					// 对name字段进行必填验证
					real_name: {
						rules: [{
								required: true,
								errorMessage: '请输入真实姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入联系电话',
							},
							{
								pattern: '^(13[0-9]|14[5|7]|15[0-9]|18[0-9]|19[1-9])\\d{8}$',
								errorMessage: '电话格式有误，重新输入'
							}
						]
					},
					student_number: {
						rules: [{
								required: true,
								errorMessage: '请输入学生学号',
							},
							{
								pattern: '^[0-9]{9}$',
								errorMessage: '学号格式不符合规范',
							}
						]
					}
				}
			}
		},
		onLoad() {
			this.getAllAcademy()
		},
		computed: {
			position() {
				if (this.$store.state.userInfo.role === 3) return 'Student'
				if (this.$store.state.userInfo.role === 2) return 'Teacher'
				if (this.$store.state.userInfo.role === 1) return 'Super Manager'
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					res.type = 2
					res.student_depart = Number(this.index) + 11
					if (res.student_depart === 11) return uni.$showMsg('请选择所在专业')
					// console.log('表单数据信息：', res);
					uni.showModal({
						title: '提示',
						content: '即将提交信息',
						success: async function(resp) {
							if (resp.confirm) {
								const response = await uni.$http.post('/user/updOrGetUserInfo', res)
								console.log(response.data)
								if (response.statusCode === 802) {
									if (response.data.msg === '学号不合法') {
										uni.$showMsg('学号不合法')
									}
									if (response.data.msg === '电话号码不合法') {
										uni.$showMsg('电话号码不合法')
									}
								}
								if (response.statusCode === 200) {
									uni.$showMsg('提交成功', 'success')
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/profile/profile'
										})
									}, 1000)
								}
							}
						}
					});
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			async getAllAcademy() {
				const {
					data: res
				} = await uni.$http.get('/academy/getAllAcademy')
				res.data.forEach(item => {
					this.Academy.push(...item.child)
				})
				this.Academy.forEach(item => {
					this.array.push(item.name)
				})
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: res => {
						this.chooseImgUrl = res.tempFilePaths
						// uni.uploadFile({
						// 	url: '后端接口地址',
						// 	filePath: res.tempFilePaths[0],
						// 	header: {
						// 		'Authorization': 'Bearer ' + token.access_token,
						// 		"Content-Type": "multipart/form-data",
						// 	},
						// 	formData: {
						// 		id: 123 // 后端接收的其他参数
						// 	},
						// 	name: 'file', // 后端接收的文件名
						// 	complete: (res) => {
						// 		console.log('res', res)
						// 	}
						// })
					}
				})
			},
			loadfont() {
				uni.loadFontFace({
					family: 'ele',
					source: `url('/static/font/ele.TTF')`,
					success() {

					},
					fail(res) {

					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6fe;
	}
	.header {
		display: block;
		width: 170rpx;
		height: 170rpx;
		margin: 40rpx auto;
	}

	.box {
		width: 85%;
		height: 276rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 2px 2px 2px rgba(150, 150, 150, .3);
		margin: 0 auto 45rpx;
		padding-left: 55rpx;

		.uni-forms-item {
			position: relative;
			height: 90rpx;

			.line {
				position: absolute;
				left: 0rpx;
				top: 65rpx;
				width: 92%;
				height: 1px;
				background-color: #efefef;
			}

			.input {
				font-size: 30rpx;

				.uni-input-placeholder,
				.input-placeholder {
					color: #e6e6e6;
				}
			}

			.uni-error-message-text {
				position: absolute;
				top: -75rpx;
				left: 140rpx;
				width: 300rpx;
			}

			picker {
				font-size: 30rpx;
				margin-top: -20rpx;

				.uni-input {
					color: #999 !important;
				}
			}
		}

		&:last-child {
			height: 500rpx;
		}

		.title {
			position: relative;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 84rpx;
			margin-bottom: 20rpx;
			color: #494949;
			&::before {
				position: absolute;
				top: 28rpx;
				left: -25rpx;
				content: '';
				width: 8rpx;
				height: 36rpx;
				background-color: #66c2a9;
				border-radius: 5rpx;
			}
		}
	}

	.label-text {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		font-size: 30rpx !important;
	}

	.goapply {
		width: 53%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;

		.text {
			color: #66c2a9;
			text-decoration: underline;
		}
	}

	button {
		width: 570rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 38rpx;
		color: #fff;
		background-color: #66c2a9;
		border-radius: 50rpx;
		margin: 80rpx auto 20rpx;
	}

	.chooseImg {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300rpx;
		height: 150rpx;
		background-color: #e5e5e5;
		border-radius: 15rpx;
		overflow: hidden;
		.img {
			width: 100%;
			height: 100%;
			image {
				width: 100%;
				height: 100%;
			}
			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 150rpx;
				background-color: rgba(150,150,150,.5);
				color: #FFFFFF;
				font-size: 36rpx;
			}
		}
	}
</style>
